<template>
  <div id="proxy-apply">
    <div class="content-apply" v-loading="loading">
      <div class="apply-row">
        <div class="row-title"> {{ $t('member.proxy.apply.nationality') }}</div>
        <div class="row-box">
          <div class="apply-wrap" @click="showCounty = !showCounty">
            {{formObj.aagent_company?formObj.aagent_company:$t('member.proxy.apply.chooseNationality') }}
            <i class="el-icon-arrow-up" v-show="showCounty" style="color:#ccc;"></i>
            <i class="el-icon-arrow-down" v-show="!showCounty" style="color:#ccc;"></i>
          </div>
          <transition name="el-fade-in-linear">
            <div class="country-ul" v-show="showCounty">
              <div class="country-li" v-for="(obj,i) in countryAry" :key="i" @click.stop="setCountry(1,obj)">
                <div class="li-name">{{obj.name}}  <span style="color: #92969E;">+{{obj.tel}}</span></div>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="apply-row">
        <div class="row-title"> {{ $t('member.proxy.apply.number') }}</div>
        <div class="row-box">
          <div class="apply-wrap" >
            <div class="code" @click="showTel = !showTel">
              <span>+{{formObj.aagent_mobile_code}}</span>
              <i class="el-icon-arrow-up" v-show="showTel" style="color:#ccc;"></i>
              <i class="el-icon-arrow-down" v-show="!showTel" style="color:#ccc;"></i>
            </div>
            <el-input v-model="formObj.aagent_mobile" @input="handleState()" :placeholder="$t('member.proxy.apply.pleaseEnterThePhoneNumber') "></el-input>
          </div>
          <transition name="el-fade-in-linear">
            <div class="country-ul" v-show="showTel">
              <div class="country-li" v-for="(obj,i) in countryAry" :key="i" @click.stop="setCountry(2,obj)">
                <div class="li-name">{{obj.name}}  <span style="color: #92969E;">+{{obj.tel}}</span></div>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="apply-row">
        <div class="row-title"> {{ $t('member.proxy.apply.mailbox') }}</div>
        <div class="row-box">
          <div class="apply-wrap">
            <el-input v-model="formObj.aagent_email" @input="handleState()" :placeholder="$t('member.proxy.apply.pleaseEnterYourEmail') "></el-input>
          </div>
        </div>
      </div>
      <div class="apply-row">
        <div class="item-box">
          <!-- <div class="item">GP</div>
          <div class="item">Lp</div> -->
          <div v-for="(obj,i) in filterArr " :key="i" :class="['item',itemIndex == i?'act':'']" @click="setItem(obj,i)">{{obj.type}}</div>
        </div>
        <div class="row-box">
          <div class="apply-wrap" @click="showProxy = !showProxy">
            {{unionObj.level_name}}
            <i class="el-icon-arrow-up" v-show="showProxy" style="color:#ccc;"></i>
            <i class="el-icon-arrow-down" v-show="!showProxy" style="color:#ccc;"></i>
          </div>
          <transition name="el-fade-in-linear">
            <div class="country-ul proxy-ul" v-show="showProxy">
              <div class="country-li proxy-li" v-for="(obj,i) in filterAry" :key="i" @click.stop="getTime(obj,i)">
                <div class="li-name">{{obj.level_name}}</div>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="apply-row">
        <div class="row-title"> {{ $t('member.proxy.apply.paymentPassword') }}</div>
        <div class="row-box">
          <div class="apply-wrap">
            <el-input type="password" v-model="formObj.pay_password" @input="handleState()" :placeholder="$t('member.proxy.apply.pleaseEnterPaymentPassword') "></el-input>
          </div>
        </div>
      </div>
      <div class="proxy-footer">
        <div class="footer-title">
          <span class="title">{{unionObj.level_name}}</span>
          <span class="num">{{unionObj.price}}  {{ $t('commons.symbol') }}</span>
        </div>
        <el-button :disabled="disabled" style="width: 460px;" type="primary" @click="submitForm()"> {{ $t('member.proxy.apply.becomeAnAgent') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { info, countryFn , levelFn , applyProxy} from '@/api/member/info';
export default {
  data() {
    return {
      countryAry: [],
      showCounty: false,
      showTel: false,
      formObj: {
				aagent_level: '', // 代理等级id
				aagent_company: '中国', // 代理国家
				aagent_mobile_code: '86',  // 手机区号
				aagent_mobile: '', // 手机号
				aagent_email: '',  // 邮箱
        pay_password: '',
			},
      filterArr: [],
			filterAry: [],
			filIndex: 0,
			unionObj: {},
      loading: true,
      itemIndex: 0,
      showProxy: false,
      disabled: true,
    };
  },
  created() {
    this.getLevel();
    this.getCountry();
  },
  mounted() {

  },
  methods: {
    // 处理
    handleState(){
      this.disabled = !Object.values(this.formObj).every(v => v);
    },
    getCountry(){
			countryFn().then(res=>{
				if(res.code == 0){
					this.countryAry = res.data;
				}
        this.loading = false
			})
		},
    getLevel(){
      levelFn().then(res=>{
        if(res.code == 0){
          this.filterArr = res.data;
          this.filterAry = this.filterArr[this.itemIndex].list;
          this.unionObj = this.filterAry[0];
          this.formObj.aagent_level = this.unionObj.id;
        }
      })
    },
    setItem(obj,type){
			this.itemIndex = type;
			this.filterAry = obj.list;
			this.unionObj = this.filterAry[0];
			this.formObj.aagent_level = this.unionObj.id;
		},
    // 选择合伙人
		getTime(obj,index){
			this.unionObj = obj;
			this.formObj.aagent_level = obj.id;
			this.showProxy = false;
		},
    // 选择
    setCountry(type,obj){
      if(type == 1){
        this.formObj.aagent_company = obj.name;
        this.showCounty = false;
      }else if(type == 2) {
        this.formObj.aagent_mobile_code = obj.tel;
        this.showTel = false;
      }
    },
    submitForm(){
      this.loading = true;
      applyProxy(this.formObj).then(res=>{
        if(res.code == 0){
          this.$message.success(this.$t('member.proxy.apply.submittedSuccessfully'))
          this.$router.replace({name: 'member'})
        }else {
          this.$message.error(res.message)
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$message.error(err.message)
      })
    },
  }
};
</script>


<style lang="scss">
  #proxy-apply {
    .el-input__inner {
      border: none;
      height: 38px;
    }
  }
</style>

<style scoped lang="scss">
  .content-apply {
    width: 100%;
    background: #fff;
    padding: 30px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 730px;
    box-sizing: border-box;
    // justify-content: center;
    .apply-row {
      .row-title {
        font-size: 12px;
        color: #868686;
        line-height: 17px;
        margin-bottom: 12px;
      }
      .item-box {
        display: flex;
				align-items: center;
        text-align: left;
				margin-bottom: 20px;
				.item {
					width: 65px;
					padding: 5px 0px;
					text-align: center;
					font-size: 13px;
					font-weight: 600;
					color: #92969E;
					line-height: 18px;
					border: 1px solid #92969E;
					box-sizing: border-box;
					border-radius: 5px;
					margin-right: 23px;
				}
				.act {
					color: #FF4543;
					border-color: #FF4543;
				}
      }
      .row-box {
        padding-bottom: 20px;
        position: relative;
        .apply-wrap {
          color: #FF547B;
          width: 460px;
          height: 40px;
          border: 1px solid #DCDFE6;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0px 15px;
          box-sizing: border-box;
          .code {
            display: flex;
            align-items: center;
            span {
              font-size: 14px;
              color: #303133;
              margin-right: 6px;
            }
          }
        }
        .country-ul {
          position: absolute;
          left: 0px;
          top: 40px;
          width: 460px;
          max-height: 300px;
          overflow: auto;
          background-color: rgb(255, 255, 255);
          box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
          z-index: 11;
          .country-li {
            padding: 0px 16px;
            box-sizing: border-box;
          }
          .country-li:hover {
            background: #F7F7F7;
            .li-name {
              color: #FF547B;
            }
          }
        }
        .proxy-ul {
          .proxy-li {
            line-height: 40px;
          }
        }
      }
    }
    .proxy-footer {
      padding-top: 30px;
      .footer-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        .title {
          font-size: 14px;
          font-weight: 600;
          color: #303133;
        }
        .num {
          font-size: 18px;
          font-weight: 600;
          color: #FF547B;
        }
      }
    }
  }
</style>
